<template>
	<view>
		<u-navbar class="navbar" back-text="取消" :title="copyComponent.config.label" :custom-back="closeConfig">
		</u-navbar>
		<view class="config-box">
			<u-form :model="component" ref="uForm" label-width="150">
				<u-form-item label="标题" prop="config.label" required
							 v-if="component.config.label !== undefined &&  component.config.showLabel !== false ">
					<u-input v-model="component.config.label"/>
				</u-form-item>
				<u-form-item label="占位提示" prop="placeholder" required v-if="component.placeholder !== undefined">
					<u-input v-model="component.placeholder"/>
				</u-form-item>
				<u-form-item label="显示标题">
					<u-switch slot="right" v-model="component.config.showLabel"></u-switch>
				</u-form-item>
				<u-form-item label="是否必填"
							 v-if="component.config.required !== undefined && component.config.showRequired !== false">
					<u-switch slot="right" v-model="component.config.required"></u-switch>
				</u-form-item>
				<u-form-item label="是否只读" v-if="component.readonly !== undefined">
					<u-switch slot="right" v-model="component.readonly"></u-switch>
				</u-form-item>
				<u-form-item label="能否清空" v-if="component.clearable !== undefined">
					<u-switch slot="right" v-model="component.clearable"></u-switch>
				</u-form-item>
				<input-config v-if="component.typeId=='INPUT'" :component.sync="component"></input-config>
				<number-config v-if="component.typeId=='NUMBER'" :component.sync="component"></number-config>
				<textarea-config v-if="component.typeId=='TEXTAREA'" :component.sync="component"></textarea-config>
				<select-config v-if="component.typeId=='SELECT'" :component.sync="component"></select-config>
				<checkbox-config v-if="component.typeId=='CHECKBOX'" :component.sync="component"></checkbox-config>
				<date-config v-if="component.typeId=='DATE'" :component.sync="component"></date-config>
				<divider-config v-if="component.typeId=='DIVIDER'" :component.sync="component"></divider-config>
				<image-config v-if="component.typeId=='IMAGE'" :component.sync="component"></image-config>
				<slider-config v-if="component.typeId=='SLIDER'" :component.sync="component"></slider-config>
				<radio-config v-if="component.typeId=='RADIO'" :component.sync="component"></radio-config>
				<rate-config v-if="component.typeId=='RATE'" :component.sync="component"></rate-config>
				<desctext-config v-if="component.typeId=='DESC_TEXT'" :component.sync="component"></desctext-config>
			</u-form>
		</view>
		<view class="btn-fixed-bottom">
			<u-button type="primary" @click="saveFormItem">
				<u-icon name="plus"></u-icon>
				{{ component.dId ? '修改' : '创建' }}
			</u-button>
		</view>
	</view>
</template>

<script>
import {formItemConvertData} from './convert.js'
import _ from 'lodash'
import InputConfig from './components/input.vue'
import NumberConfig from './components/number.vue'
import TextareaConfig from './components/textarea.vue'
import SelectConfig from './components/select.vue'
import CheckboxConfig from './components/checkbox.vue'
import DateConfig from './components/date.vue'
import DividerConfig from './components/divider.vue'
import ImageConfig from './components/image.vue'
import SliderConfig from './components/slider.vue'
import RadioConfig from './components/radio.vue'
import RateConfig from './components/rate.vue'
import DesctextConfig from './components/desctext.vue'

export default {
	props: {
		com: {},
		formKey: ''
	},
	components: {
		InputConfig,
		NumberConfig,
		TextareaConfig,
		SelectConfig,
		CheckboxConfig,
		DateConfig,
		ImageConfig,
		DividerConfig,
		SliderConfig,
		RadioConfig,
		RateConfig,
		DesctextConfig
	},
	created() {
	},
	data() {
		return {
			component: this.com,
			copyComponent: JSON.parse(JSON.stringify(this.com)),
			form: {
				label: '',
				placeholder: ''
			},
			rules: {
				label: [{
					required: true,
					message: '请输入标题',
					// 可以单个或者同时写两个触发验证方式
					trigger: 'change'
				}],
				placeholder: [{
					message: '请输入描述文字',
					trigger: 'change'
				}]
			}
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		closeConfig() {
			this.$emit('close')
		},
		handleComponent(com) {
			this.component = com
		},
		saveFormItem() {
			let data = formItemConvertData(this.component, this.formKey)
			if (this.component.dId) {
				this.$u.api.form.updateFormItem(data).then(data => {
					this.$emit('close')
				})
			} else {
				data.formItemId = `${_.toLower(this.component.typeId)}${new Date().getTime()}`
				this.$u.api.form.createFormItem(data).then(data => {
					this.$emit('close')
				})
			}

		}
	}
};
</script>

<style lang="scss">
.config-box{
	padding: 20rpx;
	margin-bottom:calc( var(--window-bottom) + 90rpx);
}
</style>
